<!DOCTYPE HTML>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>99VPS 抽奖管理页面</title>
  <link rel="stylesheet" href="assets/css/bootstrap.css">
  <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
  <style>
      .container-narrow {margin:0 auto;max-width:960px}
  </style>
</head>
<body>
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">99VPS</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              已登录为 <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="dropdown active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">抽奖管理<b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                      <li><a href="#">抽奖列表</a></li>
                      <li><a href="#">新建抽奖</a></li>
                  </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">客户管理<b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                      <li><a href="#">客户列表</a></li>
                      <li><a href="#">添加客户</a></li>
                  </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">奖品管理<b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                      <li><a href="#">奖品列表</a></li>
                      <li><a href="#">添加奖品</a></li>
                  </ul>
              </li>
              <li><a href="#contact">系统设置</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container-narrow">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">日期</th>
                <th scope="col">名称</th>
                <th scope="col">状态</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody id="lot-list">
        </tbody>
    </table>
    <div class="pagination pagination-centered">
        <ul>
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">下一页</a></li>
          </ul>
    </div>
</div>
<script type="text/x-jquery-tmpl" id="tmpl-lotList">
    <tr>
        <td>${lotId}</td>
        <td>${lotDate}</td>
        <td>${lotTitle}</td>
        <td>${lotStatus}</td>
        <td>{{each lotAction}} <a href="${$value.url}">${$value.title}</a> {{/each}}</td>
    </tr>
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-tmpl.min.js"></script>
<script type="text/javascript">
$(init);
function init(){
    var lotData = [
        {'lotId':1, 'lotDate':'2012-12-24', 'lotTitle':'平安夜送平安', 'lotStatus':'已结束', 'lotAction':[{'url':'#', 'title':'查看'}]},
        {'lotId':2, 'lotDate':'2013-01-01', 'lotTitle':'新年礼包大回馈', 'lotStatus':'报名中', 'lotAction':[{'url':'#', 'title':'查看'},{'url':'#', 'title':'修改'},{'url':'#', 'title':'抽奖'}]},
        {'lotId':2, 'lotDate':'2013-02-10', 'lotTitle':'春节充值返利送iPhone', 'lotStatus':'未开始', 'lotAction':[{'url':'#', 'title':'查看'},{'url':'#', 'title':'修改'},{'url':'#', 'title':'删除'}]}
    ];
    $('#tmpl-lotList').tmpl(lotData).appendTo("#lot-list");
}
</script>
</body>
</html>